<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h2>非受控组件</h2>
  <div id="example"></div>

  <h2>受控组件</h2>
  <div id="example2"></div>
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>
  <script type="text/babel">
    /*
      1. 问题: 在react应用中, 如何收集表单输入数据
      2. 包含表单的组件分类
        受控组件
        非受控组件
    */
    /*
      需求: 自定义包含表单的组件
        1. 界面如下所示
        2. 输入用户名密码后, 点击登陆提示输入信息
        3. 不提交表单
    */

    /*
      非受控组件:
          组件中的表单项数据在输入过程中不收集, 在提交时手动从DOM元素中读取
          技术点: ref
     */
     
    // 1. 定义表单组件
     class FormComponent extends React.Component {
      /*  constructor(props) {
        super(props);
        // 创建 ref容器
        this.usernameRef = React.createRef();
        this.pwdRef = React.createRef();
       } */
       usernameRef = React.createRef();
       pwdRef = React.createRef();
       // 定义事件方法
       handleSubmit = (event) => {
         // 阻止默认行为
         event.preventDefault();
         // 收集表单数据
         const username  = this.usernameRef.current.value;
         const pwd  = this.pwdRef.current.value;
         alert(`用户名：${username}, 密码：${pwd}`);

       }
       render() {
         return (
          <form onSubmit={this.handleSubmit}>
            <label>用户名:</label>
            <input type="text" ref={this.usernameRef}/>&nbsp;
            <label>密码:</label>
            <input type="password" ref={this.pwdRef}/>&nbsp;
            <input type="submit" value="登陆"/>
          </form>
         )
       }
     }

      /*
      受控组件:
          组件中的表单项数据在输入过程中实时收集到state, 在提交时直接读取状态数据即可
          技术点: onChange + state
      */
      class FormComponent1 extends React.Component {

        state = {
          username: '',
          pwd: ''
        }

        contentChange = (event, name) => {
          // 取出 value 值
          const value = event.target.value;
          // 设置state 指定的值
          this.setState({
            [name]: value
          })
        }

        handleSubmit = (event) => {
         // 阻止默认行为
         event.preventDefault();
         // 收集表单数据
         const {username, pwd} = this.state;
         alert(`用户名：${username}, 密码：${pwd}`);

         this.setState({
           username: '',
           pwd: ''
         })

       }
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <label>用户名:</label>
              <input type="text" value={this.state.username} onChange={(event) => this.contentChange(event, 'username')} />&nbsp;
              <label>密码:</label>
              <input type="password" onChange={(event) => this.contentChange(event, 'pwd')} value={this.state.pwd}/>&nbsp;
              <input type="submit" value="登陆"/>
            </form>
          )
        }
      }

     // 渲染组件到页面
     ReactDOM.render(<FormComponent />, document.getElementById('example'))
     ReactDOM.render(<FormComponent1 />, document.getElementById('example2'))

  </script>
</body>

</html>